import React, { useState } from 'react';
import {
  Layout,
  Form,
  Select,
  InputNumber,
  DatePicker,
  Switch,
  notification,
  Button,
  Space,
  Row,
  Col,
  Input
} from 'antd';
import SplitPane, { Pane } from 'react-split-pane';

import { selectDirectory } from '../../libs/bridge';
import { Output } from '../../components/output';
import { splitVideo } from '../../components/splitVideo';

const { Content } = Layout;
const { Item: FormItem } = Form;

function SplitVideo() {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState<boolean>(false);
  const [api, contextHolder] = notification.useNotification();
  const [paneHeight, setPaneheight] = useState(400);
  const [output, setOutput] = useState([
    '2',
    '2',
    '2',
    '2',
    '2',
    '2',
    '2',
    '2',
    '2',
    '2',
    '2',
    '2',
    '2',
    '2'
  ]);
  console.log(output);
  const openDirectory = async (key) => {
    const path = await selectDirectory();
    form.setFieldsValue({ [key]: path ? path[0] : '' });
  };

  const onFinish = (values) => {
    if (!values.sourceDirectory) {
      api.error({
        message: '错误消息',
        description: '源目录不能为空'
      });
      return;
    }
    if (!values.targetDirectory) {
      api.error({
        message: '错误消息',
        description: '目标目录不能为空'
      });
      return;
    }
    setLoading(true);
    splitVideo(values, {
      onOutput: (msg) => {
        output.push(msg);
        setOutput(output);
      },
      onFinish: () => {
        console.log('finish');
        setLoading(false);
        setOutput([...output, 'finish']);
      }
    });
    console.log(values);
  };
  return (
    <React.Fragment>
      {contextHolder}
      {/* <SplitPane split="horizontal" size={400} onChange={(size) => setPaneheight(size)}> */}
      <Content style={{ padding: 24, overflowY: 'auto' }}>
        <Form
          layout="horizontal"
          initialValues={{ startSeconds: 2, endSeconds: 2 }}
          form={form}
          onFinish={onFinish}
        >
          <FormItem
            label="视频源目录"
            name="sourceDirectory"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 16 }}
          >
            <Input.Search
              onSearch={() => openDirectory('sourceDirectory')}
              enterButton="选择目录"
            ></Input.Search>
          </FormItem>
          <FormItem
            label="视频开头"
            name="startSeconds"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 8 }}
          >
            <InputNumber min={1} max={10} style={{ width: 100 }} addonAfter="秒" />
          </FormItem>
          <FormItem
            label="视频结束"
            name="endSeconds"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 8 }}
          >
            <InputNumber min={0} style={{ width: 100 }} addonAfter="秒" />
          </FormItem>
          <FormItem
            label="视频输出目录"
            name="targetDirectory"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 16 }}
          >
            <Input.Search
              onSearch={() => openDirectory('targetDirectory')}
              enterButton="选择目录"
            ></Input.Search>
          </FormItem>
          <Row>
            <Col offset={4}>
              <Space>
                <Button type="primary" htmlType="submit" loading={loading}>
                  开始分割
                </Button>
                {/* <Button>停止</Button> */}
              </Space>
            </Col>
          </Row>
        </Form>
      </Content>
      <div style={{ height: `calc(100vh - ${paneHeight}px)` }}>
        <Output messages={output}></Output>
      </div>
      {/* </SplitPane> */}
    </React.Fragment>
  );
}

export default SplitVideo;
